<template>
  <div class="dialog">
    <el-dialog title="老师搜索" :visible.sync="isShowDialogForm" width="70%" :before-close="beforeClose" top="10vh" :show-close="false" :center="true">
      <el-form :model="searchTeacherForm" label-position="right" style="padding:10px 60px">
        <el-form-item>
          <el-form :inline="true" :model="searchTeacherForm" label-width="100px">
            <el-form-item label="学习时间：">
              <el-date-picker
                v-model="searchTeacherForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item label="老师信息：">
              <el-input v-model="searchTeacherForm.inputVal" />
            </el-form-item>

            <el-button type="primary">搜索</el-button>
          </el-form>
        </el-form-item>
        <el-form-item>
          <el-form :inline="true" :model="searchTeacherForm" label-width="120px">
            <el-form-item label="学习类型选择：">
              <el-select v-model="searchTeacherForm.changeTeachaVal" placeholder="请选择想要的学习内容">
                <el-option v-for="teach in teachVal" :key="teach.id" :label="teach.teachName" :value="teach.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="课本选择：">
              <el-select v-model="searchTeacherForm.changebookVal" placeholder="请选择课本">
                <el-option v-for="book in bookVal" :key="book.id" :label="book.bookName" :value="book.id" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-form-item>
        <el-form-item label="老师区域：">
          <el-radio-group v-model="searchTeacherForm.area">
            <el-radio label="不限">不限</el-radio>
            <el-radio label="美国">美国</el-radio>
            <el-radio label="非洲">非洲</el-radio>
            <el-radio label="加南大">加南大</el-radio>
            <el-radio label="英国">英国</el-radio>
            <el-radio label="中国">中国</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="适用范围：">
          <el-radio-group v-model="searchTeacherForm.round">
            <el-radio label="不限">不限</el-radio>
            <el-radio label="幼儿">幼儿</el-radio>
            <el-radio label="小学">小学</el-radio>
            <el-radio label="初中">初中</el-radio>
            <el-radio label="高中">高中</el-radio>
            <el-radio label="大学">大学</el-radio>
            <el-radio label="成人">成人</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="教学经验：">
          <el-radio-group v-model="searchTeacherForm.teachExp">
            <el-radio label="不限">不限</el-radio>
            <el-radio label="一年">一年</el-radio>
            <el-radio label="三年">三年</el-radio>
            <el-radio label="三年以上">三年以上</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上课方式：">
          <el-radio-group v-model="searchTeacherForm.classTool">
            <el-radio label="不限">不限</el-radio>
            <el-radio label="钉钉">钉钉</el-radio>
            <el-radio label="腾讯会议">腾讯会议</el-radio>
            <el-radio label="qq视频">qq视频</el-radio>
            <el-radio label="智慧树">智慧树</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="上课时间段">
          <el-radio-group v-model="searchTeacherForm.classTime">
            <el-radio label="不限">不限</el-radio>
            <el-radio label="早上">早上</el-radio>
            <el-radio label="中午">中午</el-radio>
            <el-radio label="下午">下午</el-radio>
            <el-radio label="晚上">晚上</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleDialogForm(true)">确 定</el-button>
        <el-button @click="handleDialogForm(false)">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['isShowDialogForm', 'classId'],
  data() {
    return {
      teachVal: [{
        id: '01',
        teachName: '小学英语'
      }],
      bookVal: [
        { id: 1,
          bookName: '小学三年级英语'
        },
        { id: 2,
          bookName: '小学四年级英语'
        },
        { id: 3,
          bookName: '小学生初中英语'
        }
      ],
      searchTeacherForm: {
        dataVal: [],
        changebookVal: '',
        changeteachVal: '',
        inputVal: '',
        area: '不限',
        round: '不限',
        teachExp: '不限',
        classTool: '不限',
        classTime: '不限'
      }

    }
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {
    handleDialogForm(bool) {
      this.$emit('changeDialogForm', false)
      if (bool) {
        this.$router.push({
          name: 'FindTeacher',
          query: {
            searchTeacherForm: JSON.stringify(this.searchTeacherForm),
            classId: parseInt(this.$route.query.classId)
          }
        })
      } else {
        console.log('不买了')
      }
    },
    beforeClose() {
    }
  }
}
</script>

<style lang="less" scoped>

</style>
